import React, { useEffect, useRef, useState } from 'react';
import { Form, Input, Modal, Select, Row, Col, DatePicker } from 'antd';
import { adminCompanyType, adminPriceType } from '@/utils/constant';
import { useRequest, useUpdateEffect } from '@umijs/hooks';
import {
  apiBankAccountGetList,
  apiProductGetList,
  apiPurchaseGetList,
} from '@/services/otherServices';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [form] = Form.useForm();
  const [searchValue, setSearchValue] = useState('');
  const [data, setData] = useState([]);
  const { loading: getListLoading, run } = useRequest(apiBankAccountGetList, {
    manual: true,
    throttleInterval: 500,
    onSuccess: (res, params) => {
      setData(res.data);
    },
  });
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
      md: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };

  useUpdateEffect(() => {
    run({
      account: searchValue,
      pageNo: 1,
      pageSize: 10,
    });
  }, [searchValue]);

  useEffect(() => {
    run({
      pageNo: 1,
      pageSize: 10,
    });
    getForm(form);
  }, []);

  useUpdateEffect(() => {
    if (visible === true) {
      run({
        pageNo: 1,
        pageSize: 10,
      });
    }
  }, [visible]);

  const onValuesChange = (changedValues: any, allValues: any) => {
    if (changedValues.paymentAccount) {
      const result: any = data.filter(
        (n: any) => n.account === changedValues.paymentAccount,
      );
      form.setFieldsValue({
        bankAccountId: result[0].id,
      });
    }
  };

  return (
    <Modal
      afterClose={afterClose}
      destroyOnClose={true}
      confirmLoading={loading}
      title={editId !== undefined ? '编辑' : '新增'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form
        hideRequiredMark
        style={{ marginTop: 8 }}
        form={form}
        name="basic"
        onValuesChange={onValuesChange}
      >
        <FormItem
          style={{ display: 'none' }}
          {...formItemLayout}
          label={'付款金额'}
          name="bankAccountId"
          rules={[{ required: true, message: '请输入付款金额' }]}
        >
          <Input />
        </FormItem>
        <FormItem
          rules={[{ required: true, message: '请选择付款公司' }]}
          {...formItemLayout}
          label={'付款公司'}
          name="paymentCompany"
        >
          <Select>
            {adminCompanyType.map(item => (
              <Select.Option key={item.value} value={item.value}>
                {item.label}
              </Select.Option>
            ))}
          </Select>
        </FormItem>
        <FormItem
          rules={[{ required: true, message: '请选择付款账号' }]}
          {...formItemLayout}
          label={'付款账号'}
          name="paymentAccount"
        >
          <Select
            showSearch
            onSearch={value => {
              setSearchValue(value);
            }}
            filterOption={false}
            placeholder="请选择付款账号"
          >
            {data &&
              data.map((item: any) => (
                <Select.Option key={item.id} value={item.account}>
                  {item.account}
                </Select.Option>
              ))}
          </Select>
        </FormItem>
        <FormItem
          rules={[{ required: true, message: '请选择付款方式' }]}
          {...formItemLayout}
          label={'付款方式'}
          name="paymentType"
        >
          <Select>
            <Select.Option value={'汇票'}>汇票</Select.Option>
            <Select.Option value={'银行汇款'}>银行汇款</Select.Option>
            <Select.Option value={'现金'}>现金</Select.Option>
          </Select>
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={'付款金额'}
          name="paymentAmount"
          rules={[{ required: true, message: '请输入付款金额' }]}
        >
          <Input />
        </FormItem>
        <FormItem
          rules={[{ required: true, message: '请选择付款日期' }]}
          {...formItemLayout}
          label={'付款日期'}
          name="paymentTime"
        >
          <DatePicker style={{ width: '100%' }} />
        </FormItem>
      </Form>
    </Modal>
  );
};
export default Detail;
